<style scoped lang='less'>
    .five-admin {
        .selected-search-components{
            .select-click{
                width: 25% !important;
                margin-bottom: 20px;
            }
        }
    }
</style>
<template>
    <div class="five-admin">
        <Tabs type="card">
            <Tab-pane label="在位率">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                    <selectSearch :selectBaseInfo="selectBaseInfo" @post-data="getCompentensData"></selectSearch>
                </Form>
                <div id="zaiwei" style="width: 900px;height:700px;"></div>
            </Tab-pane>
            <Tab-pane label="满编率">
                <div id="manbian" style="width: 900px;height:700px;"></div>
            </Tab-pane>
            <Tab-pane label="完好率">
                <div id="wanhao" style="width: 900px;height:700px;"></div>
            </Tab-pane>
            <Tab-pane label="配套率">
                <div id="peitao" style="width: 900px;height:700px;"></div>
            </Tab-pane>
            <Tab-pane label="出动率">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                    <selectSearch :selectBaseInfo="selectBaseInfo" @post-data="getCompentensData2"></selectSearch>
                </Form>
                <div id="chudong" style="width: 900px;height:700px;"></div>
            </Tab-pane>
        </Tabs>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import selectSearch from '../../components/selectSearch';

    export default {
        data() {
            return {
                apiUtilBase: apiUtil.urls.baseUrl,
                //
                formValidate: {},
                ruleValidate: {},
                //选择部门
                selectBaseInfo: {
                    "title": '选择组织结构',
                    "placeholder": '请输入所在组织名称',
                    "postUrl": apiUtil.urls.OrganSearch,
                },
                reqpeopleDept: '',
                //在位率
                zaiweiArr:[],
                //满编率
                manBianArr:[],
                //出动率
                chuDongArr:[],
            }
        },
        mounted: function () {
            this.drawChartZw();
            this.getManBianData();
            this.getChuDongArrData();
            this.drawChartPt();
            this.drawChartWh();
            this.getZaiweiData();
        },
        components: {
            selectSearch
        },
        methods: {
            //获取选择搜索组件传来结果数据
            getCompentensData: function (value) {
                this.reqpeopleDept = value;

                this.getZaiweiData();
            },
            //获取选择搜索组件传来结果数据
            getCompentensData2: function (value) {
                this.reqpeopleDept = value;

                this.getChuDongArrData();
            },
            //获取在位率数据
            getZaiweiData:function(){
                let that = this;

                let para = {
                    orgId:that.reqpeopleDept.resultId,
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetNotHereDetail, para, function (res) {
                    that.$Loading.finish();
                    that.zaiweiArr = res.Msg;
                    that.drawChartZw();
                });
            },
            //在位率图
            drawChartZw() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zaiwei"));
                let that = this;

                let option = {
                    title: {
                        text: '在位率',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: [that.reqpeopleDept.resultName]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: that.zaiweiArr.TypeData
                    },
                    series: that.zaiweiArr.Data
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");

            },
            //满编率数据
            getManBianData:function(){
                let that = this;

                let para = {};

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetManBianDetail, para, function (res) {
                    that.$Loading.finish();
                    that.manBianArr = res.Msg;
                    that.drawChartMb();
                });

            },
            //满编率
            drawChartMb() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("manbian"));
                let that = this;

                let option = {
                    title: {
                        text: '满编率',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: that.manBianArr.TypeData
                    },
                    series: that.manBianArr.Data
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");

            },
            //出动率数据
            getChuDongArrData:function(){
                let that = this;

                let para = {
                    orgId:that.reqpeopleDept.resultId,
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetChuDong, para, function (res) {
                    that.$Loading.finish();
                    that.chuDongArr = res.Msg;
                    that.drawChartCd();
                });
            },
            //出动率
            drawChartCd() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("chudong"));
                let that = this;

                let option = {
                    title: {
                        text: '出动率',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: that.chuDongArr.TypeData
                    },
                    series: that.chuDongArr.Data
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");
            },
            //配套率
            drawChartPt() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("peitao"));
                let that = this;

                let option = {
                    title: {
                        text: '配套率',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
                    },
                    series: [
                        {
                            name: '2011年',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },
                        {
                            name: '2012年',
                            type: 'bar',
                            data: [19325, 23438, 31000, 121594, 134141, 681807]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");
            },
            //完好率
            drawChartWh() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("wanhao"));
                let that = this;

                let option = {
                    title: {
                        text: '完好率',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
                    },
                    series: [
                        {
                            name: '2011年',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },
                        {
                            name: '2012年',
                            type: 'bar',
                            data: [19325, 23438, 31000, 121594, 134141, 681807]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");
            },
        }
    }
</script>
